<template>
  <view class="user-container">
    <!-- 顶部用户信息 -->
    <user-card :user="userInfo" @edit-avatar="editAvatar" @edit-nickname="editNickname" />
    
    <!-- 功能菜单区 -->
    <view class="menu-section">
      <menu-grid title="我的账户" :items="accountItems" />
      <menu-grid title="我的团队" :items="teamItems" />
      <menu-grid title="订单中心" :items="orderItems" />
      <menu-grid title="其他功能" :items="otherItems" />
    </view>
    
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import UserCard from './components/UserCard.vue'
import MenuGrid from './components/MenuGrid.vue'

// 用户信息
const userInfo = ref({
  avatar: '/static/avatar-default.png',
  nickname: '用户昵称',
  name: '张三',
  membership: '黄金会员',
  referralId: 'ID123456',
  phone: '138****8888',
  balance: 1250.50,
  rank: 'VIP3'
})

// 账户功能项
const accountItems = ref([
  { icon: 'wallet', text: '账户余额', value: `¥${userInfo.value.balance}`, path: '/pages/user/subpages/wallet' },
  { icon: 'paperplane', text: '余额提现', path: '/pages/wallet/withdraw?type=withdraw' },
  { icon: 'list', text: '提现记录', path: '/pages/wallet/withdraw-records' }
])

// 团队功能项
const teamItems = ref([
  { icon: 'person', text: '我的团队', path: '/pages/user/subpages/team' },
  { icon: 'tune', text: '交易明细', path: '/pages/wallet/transaction?tab=income' },
  { icon: 'staff', text: '排位记录', path: '/pages/user/subpages/team?tab=rank' }
])

// 订单功能项
const orderItems = ref([
  { icon: 'gift', text: '待付款', badge: 2, path: '/pages/order/list?status=unpaid' },
  { icon: 'gift', text: '待发货', badge: 1, path: '/pages/order/list?status=unsent' },
  { icon: 'gift', text: '待收货', path: '/pages/order/list?status=shipped' },
  { icon: 'gift', text: '已完成', path: '/pages/order/list?status=completed' }
])

// 其他功能项
const otherItems = ref([
  { icon: 'auth', text: '实名认证', path: '/pages/user/subpages/profile?tab=auth' },
  { icon: 'location', text: '收货地址', path: '/pages/address/list' },
  { icon: 'personadd', text: '会员分享', path: '/pages/member/share' },
  { icon: 'compose', text: '关于我们', path: '/pages/user/subpages/about' },
  { icon: 'chatbubble', text: '联系客服', path: '/pages/user/subpages/contact' },
  { icon: 'gear', text: '设置', path: '/pages/settings/index' }
])

// 编辑头像
const editAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      userInfo.value.avatar = res.tempFilePaths[0]
      // 这里应该调用API更新服务器数据
    }
  })
}

// 编辑昵称
const editNickname = () => {
  uni.navigateTo({
    url: '/pages/user/subpages/profile?tab=nickname'
  })
}

// 页面显示时刷新数据
onShow(() => {
  // 这里可以添加从服务器获取用户数据的逻辑
})
</script>

<style lang="scss">
.user-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 100rpx;
  
  .menu-section {
    padding: 20rpx;
    
    > view {
      margin-bottom: 20rpx;
    }
  }
}
</style>